<template>
<div class="main-more">
  <div class="u-title">
    <h3>
      <span class="f-ff2" v-if="this.$route.params.type==='recommend'">
        推荐节目
      </span>
      <span class="f-ff2" v-else>
        节目排行榜
      </span>
    </h3>
    <span class="sub">（每日更新）</span>
  </div>
  <ul class="toplist" v-if="this.$route.params.type==='recommend'">
    <li class="item" v-for="(item,index) in ProgramList" :key="index">
      <a href="#" class="u-cover">
        <img v-lazy="item.program.coverUrl" alt="">
        <i class="play" title="播放"></i>
      </a>
      <div class="cnt">
        <router-link :to="{name:'ProgramDetail',query: {id:item.program.id}}" class="s-fs1" :title="item.program.name">{{item.program.name}}</router-link>
      </div>
      <div  class="tag">
        <router-link :to="{name:'DjRadioDetail',query:{id:item.program.radio.id}}" class="f-fs31" :title="item.program.radio.name">{{item.program.radio.name}}</router-link>
      </div>
      <div class="col-4">播放{{item.program.listenerCount}}</div>
      <div class="col-5">
        赞{{item.program.likedCount}}
      </div>
      <router-link :to="{name:'DjRadioView',query:{id:item.program.radio.categoryId}}" class="type">{{item.program.radio.category}}</router-link>
    </li>

  </ul>
  <ul class="toplist" v-if="this.$route.params.type==='rank'">
    <li class="item" v-for="(item,index) in TopProgramList" :key="index">
      <div class="rank">
        <em class="f-fs1">{{num(index+1)}}</em>
      </div>
      <a href="#" class="u-cover" style="margin-left: 0">
        <img v-lazy="item.program.coverUrl" alt="">
        <i class="play" title="播放"></i>
      </a>
      <div class="cnt">
        <h3 class="f-thide">
          <router-link :to="{name:'ProgramDetail',query: {id:item.program.id}}" :title="item.program.name" class="s-sf1">{{item.program.name}}</router-link>
        </h3>
      </div>
      <div class="text">
        <p class="f-thide">
          <router-link :to="{name:'DjRadioDetail',query:{id:item.program.radio.id}}" class="s-fc4" :title="item.program.radio.name">{{item.program.dj.brand}}</router-link>
        </p>
      </div>
      <router-link :to="{name:'DjRadioView',query:{id:item.program.radio.categoryId}}" class="type">{{item.program.radio.category}}</router-link>
      <span class="u-hot">
          <i style="width: 92%;" class="fir">
            <i></i>
          </i>
        </span>
    </li>

  </ul>
</div>
</template>
<script>

export default {
  name: "index",
  data(){
    return {
      ProgramList:[],
      TopProgramList:[]
    }
  },
  methods:{
    num(index){
      if (index<10) {
        return `0${index}`
      }
      return index
    },
     shuffle (arr) {
      for (let i = 0; i < arr.length; i++) {
        const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
        [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
      }
      return arr
    },

    async getProgramList() {
      let result = await this.$API.reqDjProgram();
      this.ProgramList = this.shuffle(result.data.toplist)
    },
    async getTopProgramList() {
      let result = await this.$API.reqTopProgramList(100);
      this.TopProgramList = result.data.toplist
    },
  },
  mounted() {
    if (this.$route.params.type==='recommend'){
      this.getProgramList()
    }else {
      this.getTopProgramList()
    }
  }
}
</script>

<style scoped lang="less">
.main-more{
  width: 900px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;

  margin-top: 40px;
  padding-bottom: 30px;
  .u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;

    h3 {

      float: left;
      font-size: 24px;
      font-weight: normal;

      .f-ff2 {
        color: #000;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      }
    }
.sub{
  float: left;
  margin: 13px 0 0 10px;
  color: #999;
}
    .more {
      font-size: 12px;
      float: right;
      margin-top: 14px;
      color: #666;
    }

  }
  .toplist{
    border: 1px solid #e2e2e2;
    border-top: none;
    height: auto;
    overflow: hidden;
    .item{
      width: 100%;
      height: 60px;
      line-height: 60px;
      float: left;

      background-color: #fff;
      &:nth-child(-n+3){
        .rank{
          em{
            color: rgb(218, 69, 69);
          }
        }
      }
      &:nth-child(even){
        background-color: #f7f7f7;
      }
      &:hover{
        background-color: #EEEEEE;
      }
      &:hover .u-cover .play{
        display: block;
      }
      .rank{
        float: left;
        width: 47px;
        height: 30px;
        text-align: center;

        margin: 10px 0px 0px;
        text-align: center;
        line-height: normal;
        em{
          display: block;
          width: 100%;
          line-height: 30px;
          text-align: center;
        }
      }
      .text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        width: 176px;
        float: left;
        margin-left: 10px;
        p{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        a{
          color: #666;
        }
      }
      .cnt{
        float: left;
        width: 254px;
        margin: 1px 0px 0px 10px;
        line-height: 20px;
        .f-thide{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          .s-sf1{
            color: #333;
            font-weight: normal;
          }
          .s-fc4{
            color: #999;
          }
        }
      }
      .u-hot{
        margin-right: 15px;
        margin-top: 16px;
        display: block;
        height: 8px;
        float: right;
        position: relative;
        width: 100px;
        background-image: url("../../../assets/table.png");

        background-position: 0 -240px;
        line-height: normal;
        i {
          display: block;
          height: 8px;
          overflow: hidden;
          padding: 0 4px;
          background-position: right -318px;
          i{
            margin-left: -4px;
            padding: 0 0 0 4px;
            background-position: 0 -304px;
            background-image: url("../../../assets/table.png");
          }
        }


      }
      .u-cover{
        margin-left: 20px;
        width: 40px;
        height: 40px;
        margin-top: 10px;
        position: relative;
        display: block;
        float: left;
        img{
          display: block;
          width: 100%;
          height: 100%;
        }
        .play{
          position: absolute;
          display: none;
          _display: block;
          width: 22px;
          height: 22px;
          top: 50%;
          left: 50%;
          overflow: hidden;
          background-image: url("../../../assets/icn_ply.png");
          margin: -11px 0 0 -11px;
          background-position: 0 -87px;
        }
      }
      .cnt{
        float: left;
        width: 304px;
        margin: 10px 0 0 10px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        .s-fs1{
          color: #333;
        }
      }
      .tag{
        width: 166px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        .f-fs31{
          color: #666;
        }
      }
      .col-4{
        width: 90px;
        float: left;
        margin-left: 10px;
        color: #999;
      }
      .col-5{
        float: left;
        color: #999;
        margin-left: 10px;
        width: 126px;
      }
      .type{
        margin: 1px 0 0 10px;
        display: inline-block;
        position: relative;
        top: -1px;
        height: 16px;
        overflow: hidden;
        padding: 0 6px;
        border: 1px solid #999;
        line-height: 16px;
        *line-height: 18px;
        color: #999;
        vertical-align: middle;
        font-size: 12px;
      }
    }
  }
}


</style>